<template>
  <div class="User-container">
    <el-button type="success" class="add_article" @click="insertArticle">添加文章</el-button>
    <el-table :data="articlesData" border style="width: 100%">
      <el-table-column prop="_id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="title" label="标题" width="250"> </el-table-column>
      <el-table-column prop="created_time" label="发布时间"> </el-table-column>
      <el-table-column prop="last_modified_time" label="最后修改事件"> </el-table-column>
      <el-table-column prop="author" label="作者" width="180"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
          <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class="pag" background layout="total, prev, pager, next" :page-count="pageCount" :page-size="pageSize" :total="pageTotal" :current-page="currentPage" @current-change="handleCurrentChange"> </el-pagination>
  </div>
</template>

<script>
import eventBus from '@/plugins/eventBus'

export default {
  name: 'Article',
  data () {
    return {
      articlesData: [],
      shareArticle: {
        index: -1,
        info: {}
      },
      // 当前页数
      currentPage: 1,
      pageCount: 1,
      pageTotal: 1,
      pageSize: 10
    }
  },
  methods: {
    handleEdit (index, row) {
      // console.log(index, row)
      this.shareArticle = {
        index,
        info: row
      }
      this.$router.push('/system/home/editarticle/' + row._id)
    },
    async handleDelete (index, row) {
      // console.log(index, row)
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$api.deleteArticle({
            id: row._id
          })
          if (res.data.err_code === 0) {
            this.$notify({
              title: '成功',
              type: 'success',
              message: '删除成功!'
            })
            // 删除成功后重新刷新数据
            this.initArticlesInfo()
          }
        })
        .catch(() => {
          this.$notify.info({
            title: '成功',
            message: '已取消删除'
          })
        })
    },
    async initArticlesInfo (val) {
      const res = await this.$api.articleInfo({
        page: val
      })
      // console.log(res)
      this.articlesData = res.data.data
      for (let i = 0; i < this.articlesData.length; i++) {
        this.articlesData[i].created_time = this.$forMat(this.articlesData[i].created_time)
        this.articlesData[i].last_modified_time = this.$forMat(this.articlesData[i].last_modified_time)
      }
      // 总页数
      this.pageCount = res.data.pagecount
      // 总条数
      this.pageTotal = res.data.count
      // 每页显示条数
      this.pageSize = res.data.pagesize
    },
    async handleCurrentChange (val) {
      // console.log(val)
      const res = await this.$api.articleInfo({ page: val })
      this.articlesData = res.data.data
      // console.log(res)
    },
    insertArticle () {
      this.$router.replace('/system/home/insertarticle')
    }
  },
  created () {
    this.initArticlesInfo()
  },
  beforeDestroy () {
    eventBus.$emit('share', this.shareArticle)
  }
}
</script>

<style lang="less" scoped>
.pag {
  float: right;
  margin-top: 10px;
}
.add_article {
  margin-bottom: 10px;
}
</style>
